<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>js改变链接图片</title>
<style type="text/css">
	#head a{
		text-decoration:none;
		margin:10px;	
	}
	a:hover{
		border:5px solid red;	
	}
</style>
<script type="text/javascript">
	if(document.images){
		img1_on = new Image();
		img1_on.src = "images/img1_on.gif"
		img2_on = new Image();
		img2_on.src = "images/img2_on.gif"
		img3_on = new Image();
		img3_on.src = "images/img3_on.gif"
		
		img1_off = new Image();
		img1_off.src = "images/img1_off.gif"
		img2_off = new Image();
		img2_off.src = "images/img2_off.gif"
		img3_off = new Image();
		img3_off.src = "images/img3_off.gif"
	}
	function chg_imgs() {
		if (document.images) {
			for(var i=0;i<chg_imgs.arguments.length;i+=2){
				document[chg_imgs.arguments[i]].src = 
					eval(chg_imgs.arguments[i+1]+".src");			
			}
		}
	}
</script>
</head>
<body>
	<div id="head">
		<a href="#" onmouseover="chg_imgs('img1','img1_off')"
			onmouseout="chg_imgs('img1','img1_on')">
			<img name="img1" src="images/img1_on.gif" width="99" height="20" border="0" alt="home" />	
		</a>
		<a href="#" onmouseover="chg_imgs('img2','img2_off')"
			onmouseout="chg_imgs('img2','img2_on')">
			<img name="img2" src="images/img2_on.gif" width="99" height="20" border="0" alt="products">			
			</a>
			<a href="#" onmouseover="chg_imgs('img3','img3_off')"
				onmouseout="chg_imgs('img3','img3_on')">
				<img name="img3" src="images/img3_on.gif" width="99" height="20" border="0" alt="about">
				</a>
				<a href="#" onmouseover="chg_imgs('img1','img1_off','img2','img2_off','img3','img3_off')"
				onmouseout="chg_imgs('img1','img1_on','img2','img2_on','img3','img3_on')">
					同时改变3个图片
				</a>
	</div>
</body>
</html>